<template>
  <div class="user-info">
    <van-icon name="setting-o" class="user__set" @click="toUserSetting()" />
    <div class="userImg">
      <img :src="avatar">
      <div class="user-vip">
        <div class="user-vip-box">
          <img :src="vipConfig.img">
          <p :style="{ color: vipConfig.color }">{{ vipConfig.name }}</p>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main__title">
        <h3 class="name">{{ userInfo.nickname }}</h3>
      </div>
      <div class="main__id">
        <span class="code">姓名：{{ userInfo.userRealName }}</span>
        <span class="code">用户ID：{{ userInfo.id }}</span>
        <br>

        <!-- <span class="code">邀请码：{{ userInfo.inviteCode }}</span> -->

        <span class="code balance" @click="toMyBalance" v-if="userInfo.userLevel!=0">我的账户</span>
        
        <!-- <span class="code balance" @click="toMyBalance">我的余额：<span style="font-size: 18px;">￥</span>{{ userInfo.zyeBalance | yuan }}</span> -->
        <!-- <span
          style="color: #fff"
          @click="
            () => {
              copyToClipboard(userInfo.inviteCode);
            }
          "
        >
          <svg-icon icon-class="copy" :width="13" :height="13" />
        </span> -->
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import VueClipboard from 'vue-clipboard2'
import {getInfo} from '@/api/user'

// import vipImg0 from '../img/vip0.png'
// import vipImg1 from '../img/vip1.png'
// import vipImg2 from '../img/vip2.png'
// import vipImg3 from '../img/vip3.png'
import { Toast } from 'vant'

const vipImg0 = require('../img/vip0.png')
const vipImg1 = require('../img/vip1.png')
const vipImg2 = require('../img/vip2.png')
const vipImg3 = require('../img/vip3.png')

Vue.use(VueClipboard)

export default {
  computed: {
    ...mapGetters(['userInfo']),
    vipConfig() {
      switch (this.userInfo.userLevel) {
        case 0:
          return { color: '#f0dfbd', img: vipImg0, name: '普通会员' }
        case 1:
          return { color: '#f8e495', img: vipImg1, name: '黄金会员' }
        case 2:
          return { color: '#09e3f8', img: vipImg2, name: '股东会员' }
        case 3:
          return { color: '#ceb1f6', img: vipImg3, name: '总裁会员' }

        default:
          return {}
      }
    },
    avatar() {
      return this.userInfo.avatar
    }
  },
  data() {
    return {
      static: ''
    }
  },
  created() {
  },
  async mounted() {
    console.log(this.userInfo)

    console.log(this.$store)
    this.$store.dispatch('user/getInfo')
    // const res =await getInfo(this.$store.getters.token)
    // this.$store.commit('user.SET_USER_INFO',,res.map.info)

  },
  beforeUpdate(){
  },
  methods: {
    toUserSetting() {
      this.$router.push({ name: 'UserSetting' })
    },
    copyToClipboard(text) {
      navigator.clipboard
        .writeText(text)
        .then(() => {
          Toast.success('复制成功')
          console.log('Text copied to clipboard')
        })
        .catch((err) => {})
    },
    toMyBalance() {
      this.$router.push('/balance')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.user-info {
  display: flex;
  flex-direction: row;
  padding: 60px 24px 50px 24px;
  background: $red;
  border-radius: 100% 100% 100% 100% / 0% 0% 16% 16%;
  .userImg {
    position: relative;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    .user-vip {
      position: absolute;
    }
    .user-vip-box {
      position: relative;
      // width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: min(4.8vw, 26.88px);
      p {
        background-color: rgb(36 88 188);
        color: white;
        padding: min(0.267vw, 1.493px) min(0.667vw, 3.733px);
        font-size: 20px;
        padding: 3.2px 8px;
        text-align: center;
        width: 90px;
        left: 3.2px;
        margin-left: 3.2px;
        border-radius: 9.6px;
      }
      img {
        position: absolute;
        width: 36px;
        height: 36px;
        z-index: 10;
        left: -16px;
      }
    }
  }
  .user__set {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 50px;
  }
  .main {
    margin-left: 28px;
    .main__title {
      display: flex;
      flex-direction: row;
      align-items: center;
      // margin-top: 6px;
      .name {
        font-size: $large;
        font-weight: 500;
        color: #fff;
        display: inline-block;
        max-width: 350px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 20px;
      }
    }
    .main__id {
      margin-top: 25px;
      .code {
        font-size: $small;
        font-weight: 400;
        color: #fff;
        margin-right: 10px;
      }
      .balance{
        height: 50px;
        line-height: 50px !important;
        margin-top: 20px;
        text-decoration: underline;
      }
    }
  }
}
</style>
